{% extends 'pages/_base.html' %}
{% block _base %}

{% from 'tools/card.html' import nonModal %}
{% from 'tools/list.html' import list %}
{% set head %}

<div class="d-flex align-items-start">
<img src="{{ data.Personal[0].img_icon }}" alt="用户头像"
                 class="rounded-circle me-3"
                 style="width: 60px; height: 60px; object-fit: cover; border: 2px solid #ddd;" />

            <div class="flex-grow-1">
                <!-- 用户名和角色 -->
                <div class="d-flex align-items-center mb-2">
                    <a href="{{ url_for('personal.get_anyone_page_of_personal',uid=data.Personal[0].id) }} " class="fw-blod me-2">{{ data.User[0].username }} </a>
                    <span class="badge bg-secondary"> {{ data.Personal[0].role }} </span>
                    <span class="badge bg-primary">{{ data.Blog[0].sort }}</span>
                 <small class="text-muted"> {{ data.Blog[0].time }} </small>
            </div>

            <a href="{{ url_for('post.get_anyone_page_of_blog',pid=data.Blog[0].id) }}">{{ data.Blog[0].title }}</a>

        </div>
    </div>

{% endset %}

{% set footer %}
    <ul class="list-group">
        {% for i in data.Comment %}
        <li class="list-group-item">
            <div class="d-flex align-items-start">
                <!-- 用户头像 -->
                <img id="img_icon" src="{{ i.Personal[0].img_icon }}" alt="用户头像"
                     class="rounded-circle me-3"
                     style="width: 60px; height: 60px; object-fit: cover; border: 2px solid #ddd;" />

                <!-- 用户信息和评论内容 -->
                <div class="flex-grow-1">
                    <!-- 用户名和角色 -->
                    <div class="d-flex align-items-center mb-2">
                        <a href="{{ url_for('personal.get_anyone_page_of_personal',uid=i.Personal[0].id) }} " class="fw-blod me-2">{{ i.User[0].username }} </a>
                        <span class="badge bg-secondary"> {{ i.Personal[0].role }} </span>
                         <small class="text-muted"> {{ i.time }} </small>
                    </div>

                    <!-- 评论内容 -->
                    <p class="mb-1">{{ i.content | safe }}</p>

                    <!-- 评论时间 -->

                </div>
            </div>
        </li>
        {% endfor %}
    </ul>

{% if data.writeable %}

<!--TODO-->
<button id="likeButton" class="btn btn-outline-success me-2">👍 喜欢</button>
<!-- 举报按钮 -->
<button id="reportButton" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#reportModal">
    🚨 举报
</button>

<script>
    let likeButton = getElementById('likeButton')
   let reportButton =getElementById('reportButton');
   Event(reportButton,'click',()=>{
       fetchPost('{{ url_for('post.post_anyone_service_of_recheck_blog',pid=data.Blog[0].id) }}',{}).then((json)=>{
           flash(json.msg)
       })
   })

    Event(likeButton,'click',()=>{
        fetchPost('{{ url_for('post.post_anyone_service_of_like_blog',pid=data.Blog[0].id)  }} ',{}).then((json)=> {
            flash(json.msg)
        })
    })

</script>



<form class="mt-3">
<div class="input-group">
    <input type="hidden" id="pid" value="{{ data.Blog[0].id }}">
    <input type="text" id="content" class="form-control" placeholder="输入评论..." required>
    <button id="submitbut" type="submit" class="btn btn-primary">发送</button>
</div>

</form>

    <script>
        let but = getElementById('submitbut')
        let pid = getElementById('pid')
        let content = getElementById('content')

        Event(but,'click',()=>{
           data = {
               'pid': pid.value,
               'content':content.value,
           }

           fetchPost('{{ url_for('post.post_my_model_of_comment') }}',data=data).then((json)=>{
               flash(json.msg)
            })
        })

    </script>
{% endif %}

{% endset %}


{{ nonModal(
    head=head,
    body = data.Blog[0].content | safe,
     footer=footer | safe,
   collapse=False
) }}

{% endblock %}